<template>
    <div class="header">
      <p class="title">问卷列表</p>
      <img class="picture" src="../../../assets/img.png" />
    </div>
  <a-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="questiontitle">{{ item.paper_title }}</p>
          </template>
          <template #avatar>
            <a-avatar src="../../../assets/img.png" />
          </template>
        </a-list-item-meta>
        <template #actions>
          <a @click="goDetail(item.paper_id)">详情</a>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, onMounted, inject } from 'vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { useRoute, useRouter } from 'vue-router'
import { get, detele, post } from '../../../utils/request/request'

interface DataItem {
  key: string
  id: number
  title: string
  start_time: string
  end_time: string
  status: number | string
  count: number
  create_by: string
  create_time: string
  app_user_name:string
}
const data: Ref<DataItem[]> = ref([])

// 网络请求
const useHttpEffect = (token: string, id: any) => {
  const paginationProps = ref({
    current: 1,
    pageSize: 10,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}轮面试`,
    onChange: (current: number, pageSize: number) => getTableData(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => getTableData(current, pageSize)
  })

  const getTableData = async (pageNumber: number, pageSize: number) => {
    const res: any = await get(`/admin/api/v1/paper/answers?paper_id=0&app_user_id=${id}&page=${pageNumber}&limit=${pageSize}`, token)
    console.log(res)
    paginationProps.value.current = res?.pagination?.page
    paginationProps.value.pageSize = res?.pagination?.limit
    paginationProps.value.total = res?.pagination?.total
    if (res?.data == null) {
      message.info('没有问卷数据')
    } else {
      const modifiedData = res.data
      modifiedData.forEach((question: DataItem) => {
        if (question.status === 0) {
          question.status = '未发布'
        } else if (question.status === 1 || question.status === 2) {
          question.status = '已发布'
        } else if (question.status === 3) {
          question.status = '已结束'
        }
      })
      data.value = modifiedData
    }
  }
  return { getTableData, paginationProps }
}

//列表操作
const useListEffect = () => {
  const router = useRouter()
  const route = useRoute()
  const id = route.params.id
//   跳转到问卷详情
  const goDetail = (paper_id: number) => {
    router.push({ name: 'userPaperDetail', params: { paper_id: paper_id,id:id } })
  }
  return { goDetail }
}

export default defineComponent({
  components: {},
  setup() {
    const token: string = localStorage.getItem('token') as string
    const role = ref<string>(localStorage.getItem('role') as string)
    const { goDetail } = useListEffect()
    const route = useRoute()
    const id = route.params.id
    const { getTableData, paginationProps } = useHttpEffect(token, id)
    onMounted(() => {
      getTableData(paginationProps.value.current, paginationProps.value.pageSize)
    })
    return {
      data,
      role,
      goDetail,
      token,
      getTableData,
      paginationProps
    }
  }
})
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 85px;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  width: 10%;
  position: relative;
  left: 87%;
  bottom: 90%;
  background-color: #4c63e9;
}
.questiontitle {
  font-size: 20px;
}
</style>
